<template>
  <div class="pos">
   <el-row> 
       <el-col :span='9' class="pos-order" id='order-list'>
        <el-tabs>
          <el-tab-pane label='点餐'>
            <el-table border :data='tableData'>
              <el-table-column prop='goodsName' label='商品名称'></el-table-column>
              <el-table-column prop='count' label='数量' ></el-table-column>
              <el-table-column prop='price' label='金额'></el-table-column>
              <el-table-column  label='操作' fixed='right'>
                  <template scope='scope'>
                    <el-button type='text' size='small' @click="delSingleGoods(scope.row)">删除</el-button>
                    <el-button type='text' size='small' @click="addOrderList(scope.row)">增加</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div class="total">
              <div>数量:<span>{{totalCount}}</span></div>
              <div>金额:<span>{{totalMoney}}</span></div>
            </div>
            <div class="operate-btn">
              <el-button type='warn'>挂单</el-button>
              <el-button type='danger' @click ='delAllGoods'>删除</el-button>
              <el-button type='success' @click='checkout'>结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label='挂单'>
            
          </el-tab-pane>
          <el-tab-pane label='外卖'>
            
          </el-tab-pane>
        </el-tabs>
       </el-col>
        <el-col :span='15' class="pos-order" id='order-list1'>
          <div class="often-goods">
              <div class="title">常用商品</div>
              <div class="often-goods-list">
                  <ul>
                      <li v-for="goods in oftenGoods">
                          <span>{{goods.goodsName}}</span>
                          <span class="o-price">￥{{goods.price}}元</span>
                      </li>
                  </ul>
              </div>
          </div>
           <div class="goods-type">
            <el-tabs>
                <el-tab-pane label="汉堡">
                    <ul class='cookList'>
                       <li v-for="goods in type0Goods" class="goodsList" @click="addOrderList(goods)">
                           <div class="foodImg"><img :src="goods.goodsImg" width="100%"></div>
                           <div class="foodInfo">
                             <div class="foodName">{{goods.goodsName}}</div>
                              <div class="foodPrice">￥{{goods.price}}元</div>
                           </div>
                       </li>
                    </ul>
                </el-tab-pane>
                    <el-tab-pane label="小食">
                    <ul class='cookList'>
                       <li v-for="goods in type1Goods" class="goodsList"  @click="addOrderList(goods)">
                           <div class="foodImg"><img :src="goods.goodsImg" width="100%"></div>
                           <div class="foodInfo">
                             <div class="foodName">{{goods.goodsName}}</div>
                              <div class="foodPrice">￥{{goods.price}}元</div>
                           </div>
                       </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="饮料">
                    <ul class='cookList'>
                       <li v-for="goods in type2Goods" class="goodsList"  @click="addOrderList(goods)">
                          <div class="foodImg"><img :src="goods.goodsImg" width="100%"></div>
                           <div class="foodInfo">
                             <div class="foodName">{{goods.goodsName}}</div>
                              <div class="foodPrice">￥{{goods.price}}元</div>
                           </div>
                       </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="套餐">
                    <ul class='cookList'>
                       <li v-for="goods in type3Goods" class="goodsList" @click="addOrderList(goods)">
                          <div class="foodImg"><img :src="goods.goodsImg" width="100%"></div>
                           <div class="foodInfo">
                             <div class="foodName">{{goods.goodsName}}</div>
                              <div class="foodPrice">￥{{goods.price}}元</div>
                           </div>
                       </li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
        </div>
       </el-col>
   </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'pos',
  data(){
    return {
      tableData:[],
      totalCount:0,
      totalMoney:0,
      oftenGoods:[],
      type0Goods:[],
      type1Goods:[],
      type2Goods:[],
      type3Goods:[]

    }
  },
  methods:{
     //添加订单列表的方法
           addOrderList(goods){
                 this.totalCount=0; //汇总数量清0
                 this.totalMoney=0;
                 let isHave=false;
                 //判断是否这个商品已经存在于订单列表
                 for (let i=0; i<this.tableData.length;i++){
                     console.log(this.tableData[i].goodsId);
                     if(this.tableData[i].goodsId==goods.goodsId){
                         isHave=true; //存在
                     }
                 }
                 //根据isHave的值判断订单列表中是否已经有此商品
                 if(isHave){
                     //存在就进行数量添加
                      let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
                      arr[0].count++;
                      //console.log(arr);
                 }else{
                     //不存在就推入数组
                     let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
                      this.tableData.push(newGoods);
      
                 }
                  
                 //进行数量和价格的汇总计算
                 this.tableData.forEach((element) => {
                     this.totalCount+=element.count;
                     this.totalMoney=this.totalMoney+(element.price*element.count);   
                 });
                
           },
           delSingleGoods(goods){
                  console.log(goods);
                  this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
                  this.getAllMoney();
           
                },
          getAllMoney(){
                    this.totalCount=0;
                    this.totalMoney=0;
                    if(this.tableData){
                            this.tableData.forEach((element) => {
                        this.totalCount+=element.count;
                        this.totalMoney=this.totalMoney+(element.price*element.count);   
                    });
                    }
                    
                },
          delAllGoods() {
            console.info(11111)
            this.tableData = [];
            this.totalCount = 0;
            this.totalMoney = 0;
        },
        checkout() {
            if (this.totalCount!=0) {
                this.tableData = [];
                this.totalCount = 0;
                this.totalMoney = 0;
                this.$message({
                    message: '结账成功，感谢你又为店里出了一份力!',
                    type: 'success'
                });
         
            }else{
                this.$message.error('不能空结。老板了解你急切的心情！');
            }
         
        }
  },
  mounted:function(){
    var orderHeight = document.body.clientHeight;
    console.info(orderHeight);
    document.getElementById('order-list').style.height=orderHeight+'px';
    document.getElementById('order-list1').style.height=orderHeight+'px';
  },
  created(){
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
      .then(response=>{
         console.log(response);
         this.oftenGoods=response.data;
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      });
      axios.get('http://jspang.com/DemoApi/typeGoods.php')
      .then(response=>{
         console.log(response);
         //this.oftenGoods=response.data;
         this.type0Goods=response.data[0];
         this.type1Goods=response.data[1];
         this.type2Goods=response.data[2];
         this.type3Goods=response.data[3];
 
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pos-order{
    background-color: #f9fafc;
    border-right: 1px solid #c0ccda;
  }
  .operate-btn{
    margin-top: 2%;
  }
  .total{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #dfe6ec;
  }
 .total div{
      width: 39%;
      text-align: left;
      height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
    }
  .title{
         height: 20px;
         border-bottom:1px solid #D3DCE6;
         background-color: #F9FAFC;
         padding:10px;
     }
  .often-goods-list ul li{
        list-style: none;
        float:left;
        border:1px solid #E5E9F2;
        padding:10px;
        margin:5px;
        background-color:#fff;
     }
  .o-price{
        color:#58B7FF; 
     }
  .goods-type{
    clear: both;
  }
  .cookList{
    display: flex;
  }
  .foodImg{
    width: 40%;
  }
  .foodInfo{
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
.goodsList{
  display: flex;
  width: 23%;
  justify-content: space-around;
}
</style>
